<template src="./template.html"></template>
<script>
/* global _ */
import ChartCircle from 'components/chart-circle'
import ChartLine from 'components/chart-line'
import ChartRadar from 'components/chart-radar'
import VideoPreviewModal from 'components/video-preview-modal'

export default {
  props: {
    isFollow: {
      type: Boolean,
      default: true
    },
    exerciseList: {
      type: Array,
      default: () => []
    },
    cardList: {
      type: Array,
      default: () => []
    },
    infos: {
      type: Object,
      default: () => {}
    },
    videoInfo: {
      type: Object,
      default: () => {}
    }
  },
  components: { ChartCircle, ChartLine, ChartRadar, VideoPreviewModal },
  data() {
    return {
      currExerciseNumber: 0,
      videoPreviewModalVisible: false
    }
  },
  computed: {
    reportCardList() {
      const cardList = _.cloneDeep(this.cardList)
      const rangeInfo = {
        1: { tagClass: 'progress-tag-red', tag: '需改进', progressColor: '#F02525' },
        2: { tagClass: 'progress-tag-yellow', tag: '一般', progressColor: '#F28F15' },
        3: { tagClass: 'progress-tag-blue', tag: '良好', progressColor: '#315BF4' },
        4: { tagClass: '', tag: '优秀', progressColor: '#2AB55E' },
        5: { tagClass: '', tag: '卓越', progressColor: '#2AB55E' }
      }
      cardList.forEach(item => {
        let progress = 1
        if (item.progress <= 59) {
          progress = 1
        } else if (item.progress >= 59 && item.progress <= 69) {
          progress = 2
        } else if (item.progress >= 69 && item.progress <= 85) {
          progress = 3
        } else if (item.progress >= 85 && item.progress <= 95) {
          progress = 4
        } else if (item.progress >= 95 && item.progress <= 100) {
          progress = 5
        }
        item.tagClass = rangeInfo[progress].tagClass
        item.tag = rangeInfo[progress].tag
        item.progressColor = rangeInfo[progress].progressColor
      })
      return cardList
    },
  },
  watch: {
    exerciseList: {
      handler() {
        if (this.exerciseList && this.exerciseList.length > 0) {
          this.currExerciseNumber = this.exerciseList[0].exerciseNumber
        }
      },
      deep: true,
      immediate: true,
    }
  },
  methods: {
    $previewVideo() {
      if (!this.videoInfo.url) {
        this.$message.error('视频不存在')
        return
      }
      this.videoPreviewModalVisible = true
    },
    $handleCommand(no) {
      this.currExerciseNumber = no
    }
  }
}
</script>
